<template>
  <!--列表模块-->
  <div class="list_module_wrap" v-show="dataList.length">
    <div :class="['list_module', listWrapClass]">
      <div class="module_title_wrap" v-if="title">
        <div class="title">
          {{title}}
          <router-link v-if="moreLink" :to="moreLink" @click.native="toUrl(title)">
            <i class="more_icon"></i>
          </router-link>
          <div class="sub_title" v-if="subTitle">{{subTitle}}</div>
        </div>
        <!--栏目下的tag区域-->
        <slot name="funcTag"></slot>
      </div>
      <!--栏目下的tag区域点击响应区域-->
      <slot name="funcTagResp"></slot>

      <div v-if="listType === 'news'">
        <!--资讯列表-->
        <News-List :newsList="dataList"></News-List>
      </div>
      <ul v-else>
        <!--产品列表-->
        <li
          class="li_item "
          :class="item.prodOpenClass"
          v-for="item in dataList"
          @click="goToProduct(item)"
          :key="item.id"
        >
          <div class="module_item_content flex v-1px-b">
            <Product-Left :productInfo="item" :listWrapClass="listWrapClass">
              <template>
                <!--首发基金-->
                <p v-if="listWrapClass === 'ipo_fund'" class="ellipsis">{{item.mainTag}}</p>
              </template>
            </Product-Left>
            <Product-Right :productInfo="item" :listWrapClass="listWrapClass">
              <template></template>
            </Product-Right>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import tracking from '@/utils/tracking.js';
import ProductLeft from './productLeft.vue';
import ProductRight from './productRight.vue';
import NewsList from './newsList.vue';

export default {
  name: 'ListModule',
  mixins: [
    tracking
  ],
  props: [
    'listWrapClass',
    'title',
    'subTitle',
    'dataList',
    'listType',
    'moreLink',
  ],
  components: {
    ProductLeft,
    ProductRight,
    NewsList,
  },
  computed: {},
  methods: {
    goToProduct(item) {
      // TD埋点 CNZZ埋点
      this.buryEventPoint('H5-JJYLM-EVENT', this.title);
      this.buryEventPointCNZZ('H5-JJYLM-EVENT', this.title);

      if (item.stock_code) {
        // 跳转天添金详情页
        this.$router.push({
          path: `${this.global.publicPath}/qrp/payment`,
          query: { stockCode: item.stock_code },
        });
        return;
      }
      if (item.prodtaNo == '98' && item.prodCode.indexOf('B3') > -1) {
        // 跳转资管产品详情页
        this.$router.push({
          path: `${this.global.publicPath}/asset/detail`,
          query: { prodCode: item.prodCode },
        });
        return;
      }
      if (item.registerCorpCode == 'czz') {
        // 跳转收益凭证详情页
        this.$router.push({
          path: `${this.global.publicPath}/finan/detail`,
          query: { prodCode: item.prodCode },
        });
        return;
      }
      // 中台配置的栏目基金详情页
      if (item.columnCode) {
        // 跳转基金详情页
        this.$router.push({
          path: `${this.global.publicPath}/fund/detail`,
          query: { prodCode: item.prodCode },
        });
        return;
      }

      // 首发基金详情页
      if (item.existInT2 === '1') { // 是柜台产品，则跳转
        // 跳转基金详情页
        this.$router.push({
          path: `${this.global.publicPath}/fund/detail`,
          query: { prodCode: item.prodCode, prodType: 'ipo' },
        });
      }
    },
    toUrl(name) {
      // TD埋点 CNZZ埋点
      this.buryEventPoint('H5-JJYLM-EVENT', name);
      this.buryEventPointCNZZ('H5-JJYLM-EVENT', name);
    }
  },
};
</script>

<style lang="less" scoped>
// 首页-首发基金
.ipo_fund {
  margin-top: 0;
  .module_title_wrap {
    background-image: url("../../assets/images/jubaopen_shoufajijin_bg@2x.png");
  }
  .left_column {
    font-size: 20px;
    color: #ff852e;
  }
}
// 首页-热门产品
.hot_product {
  .module_title_wrap {
    background-image: url("../../assets/images/jubaopen_remenchanpin_bg@2x.png");
  }
}
// 首页-小宝榜单
.xiaobao_rank {
  .module_title_wrap {
    background-image: url("../../assets/images/jubaopen_xiaobaobangdan_bg@2x.png");
  }
  .rank_desc_wrap {
    margin: 3px 15px 13px 15px;
    align-items: center;
    flex: 1;
    .xiaobao_img {
      margin-left: -10px;
      width: 90px;
      height: 86px;
    }
    .rank_desc_bg {
      background-image: url("../../assets/images/jubaopen_xiaobaobangdan_box@2x.png");
      background-size: contain;
      height: 60px;
      .rank_desc {
        padding: 9px 10px 9px 20px;
        font-size: 14px;
        color: #665247;
        line-height: 21px;
        opacity: 0.87;
      }
    }
  }
}
// 首页-投资有道
.invest_news {
  .module_title_wrap {
    background-image: url("../../assets/images/jubaopen_touziyoudao_bg@2x.png");
  }
}
// 基金聚合页-稳健精选
.wenjian_jx {
  // margin-top: 0px;
  .module_title_wrap {
    background-image: url("../../assets/images/jubaopen_shoufajijin_bg@2x.png");
    .rank_tag_wrap {
      margin-bottom: 5px;
    }
  }
}
// 基金聚合页-收益优先
.shouyi_yx {
  .module_title_wrap {
    background-image: url("../../assets/images/jubaopen_xiaobaobangdan_bg@2x.png");
    .rank_tag_wrap {
      margin-bottom: 5px;
    }
  }
}
// 定期理财页-短期理财
.short_period {
  margin-top: 0px;
  .module_title_wrap {
    background-image: url("../../assets/images/jubaopen_shoufajijin_bg@2x.png");
  }
}
// 定期理财页-中长期理财
.mid_long_peiriod {
  .module_title_wrap {
    background-image: url("../../assets/images/jubaopen_xiaobaobangdan_bg@2x.png");
  }
}
// 活期理财页-货币基金
.monetary_fund {
  margin-top: 0px;
  .module_title_wrap {
    background-image: url("../../assets/images/jubaopen_shoufajijin_bg@2x.png");
  }
}
// 活期理财页-短债基金
.short_debt_fund {
  margin-top: 15px;
  .module_title_wrap {
    background-image: url("../../assets/images/jubaopen_xiaobaobangdan_bg@2x.png");
  }
}
// 集合产品
.asset {
  margin-top: 0;
  .module_item_content{
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .li_item.open,
  .li_item.pre-open {
    position: relative;
    &::before {
      font-size: 11px;
      color: #ffffff;
      padding: 0 5px;
      position: absolute;
      top: 0;
      right: 15px;
      border-radius: 0 0 2px 2px;
      z-index: 2;
    }
  }
  .li_item.open::before {
    content: "开放购买";
    background-image: linear-gradient(90deg, #ffc34d 0%, #ff8833 100%);
  }
  .li_item.pre-open::before {
    content: "即将开放";
    background-image: linear-gradient(90deg, #3861fe 0%, #489bfe 100%);
  }
}
</style>